<!----权限模块的用户管理默认页面--->
<template>
  <div >
    <!--工具类-->
    <Row>

      <i-col span="24" style="text-align: right">
        <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>
        <Button type="primary" icon="md-add" class="y_condition"
                @click="userAdd">添加新员工
        </Button>
      </i-col>

    </Row>


    <List size="small" border style="margin:0.5rem;text-align: left">
      <div v-if="userList==null || userList.length==0">
        <ListItem>
          <div style="width: 100%; text-align: center;">暂无数据</div>
        </ListItem>
      </div>
      <div v-else>
        <ListItem v-for="(item,index) in userList" class="item_hover">
          <i-col flex="auto">
            <KeyValueView title="姓名" >{{item.userName}}</KeyValueView>
            <KeyValueView title="角色" oneline >
              <tag color="blue" v-for="roleItem in item.employeeRoles" >{{roleItem.name}}</tag>
            </KeyValueView>
          </i-col>
          <i-col >
            <div class="item_bottom" style="padding: 0.5rem " >
              <i-button type="primary" size="small"  style="margin-right:10px" @click="editItem(index)">编辑</i-button>
              <i-button type="error" size="small"  style="margin-right:10px" @click="deleteAction(index)">删除</i-button>
            </div>
          </i-col>
        </ListItem>
      </div>
    </List>


    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" show-sizer show-elevator/>
    </div>
    <!--删除确认弹出框-->
    <Modal
      v-model="modalDelete.isShow"
      title="确认删除"
      :loading="modalDelete.isLoading"
      @on-ok="deleteItem">
      <br>
      <p>确认删除员工<a><strong> {{modalDelete.userInfo.userName}} </strong></a>?</p>
      <br>

    </Modal>
    <!--新用户弹出框-->
    <Modal
      v-model="modal.isShow"
      :title="modal.title"
      :closable="false"
      :mask-closable="false"
      :loading="modal.isLoading"
      @on-ok="newOrModifyUser('paramUser')">

      <Form ref="paramUser" :model="paramUser" :rules="ruleUser" :label-width="120"
            class="modal_newuser_form">
        <FormItem label="用户名 : " prop="userName">
          <Input v-model.trim="paramUser.userName" placeholder="请输入"
                 class="modal_newuser_form_input"></Input>
        </FormItem>
        <FormItem label="是否编辑密码 : " v-if="modal.isModify">
          <i-switch v-model="modal.isModifyPassword">
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </FormItem>

        <div v-if="!modal.isModify || modal.isModifyPassword">
          <FormItem label="密码 : " prop="password">
            <Input v-model.trim="paramUser.password" placeholder="请输入" type="password"
                   class="modal_newuser_form_input"></Input>
          </FormItem>
          <FormItem label="确认密码 : " prop="passwordCheck">
            <Input v-model.trim="paramUser.passwordCheck" placeholder="请输入" type="password"
                   class="modal_newuser_form_input"></Input>
          </FormItem>
        </div>
        <FormItem label="请选择角色 :" prop="roleId">
          <Select @on-change="changeRole" placeholder="请选择" :label-in-value=true class="modal_newuser_form_input"
                  ref="roleSelect" clearable>
            <Option v-for="item in roleList" :value="item.id" :key="item.id">{{item.name}}</Option>
          </Select>

          <Button type="dashed" icon="md-add" style="margin-left: 8px" size="small"
                  @click="paramUserAddRole()">添加
          </Button>
        </FormItem>

        <FormItem label="已有角色管理 : " prop="roleItem">

          <div v-for="(item,index) in paramUser.roles">
            <Button type="dashed" icon="md-remove" style="margin-right: 18px" size="small"
                    @click="paramUserRemoveRole(index)">移除角色 : <strong>{{item.label}}</strong>
            </Button>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>

</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/user/userlist_data"
  import {init, add, modify, deleted, webAddOrModify, webDelete, webList, webRoleList} from "./js/user/userlist_funs"
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    components: {ICol,KeyValueView},
    data() {
      return {
        // 页面元素
        page: tiyData.tPage,
        modal: tiyData.tStatus.modalModify,
        modalDelete: tiyData.tStatus.modalDelete,
        roleList: tiyData.tData.roleList,
        //接口交互时需要的 DATA
        paramUser: tiyData.tParam.user,
        //验证时的 rule
        ruleUser: tiyData.tStatus.rules,
        userList: tiyData.tData.userList,
        tempRole: {},
      }
    },
    computed: {

    },
    methods: {

      editItem(index) {
        modify(this, tiyData, index)
      },
      deleteAction(index) {
        deleted(this, tiyData, index)
      },
      deleteItem() {
        webDelete(this, tiyData);
      },
      getRoleUserList() {
        webList(this, tiyData)
      },
      userAdd() {
        add(this, tiyData)
      },
      newOrModifyUser(name) {
        webAddOrModify(this, tiyData, name)
      },
      changeRole(role) {
        this.tempRole = role;
      },
      changePage(page) {
        tiyData.tPage.currentPage = page;
        this.getRoleUserList();
      },
      sizeChange(p) {
        tiyData.tPage.stepNumber = p;
        this.getRoleUserList();
      },
      paramUserAddRole() {
        if (!this.tempRole || !this.tempRole.value) {
          this.$Message.error('添加角色不能为空!');
          return;
        }
        let index = this._.find(this.paramUser.roles, this.tempRole);
        if (index === undefined) {
          this.paramUser.roles.push(this.tempRole);
        } else {
          this.$Message.error('角色不可重复添加!');
        }
        this.$refs["roleSelect"].clearSingleSelect();
      },

      paramUserRemoveRole(index) {
        this.paramUser.roles.splice(index, 1);
      },
      search() {
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
        // webRoleList(this, tiyData);
      },
    },
    mounted() {
      init(this, tiyData);
      // webList(this, tiyData);
      webRoleList(this, tiyData);
    }
  }

</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional)  "../css/base";
  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input {
    max-width: 230px;
  }

.item_hover{
  padding: 0.5rem 0.5rem;
}
.item_hover:hover{
  background: #f3f3f3;
}
.ivu-list-items{
  text-align: left;
}
</style>
